<template>
  <div @click="changeTop" :class="{ cur: navIndex == 2 }">
    <div class="item">
      <header>
        <h4>配送信息</h4>
        <section>
          <div>
            <p>
              <span>硅谷专送</span
              ><span> 配送费超过20元由商家提供, 约28分钟到达， 距离1000m</span>
            </p>
          </div>
          <p>配送费 ￥4</p>
        </section>
      </header>

      <div class="blank"></div>
      <section>
        <h4>活动与服务</h4>
        <div v-for="(item, index) in shopDetails.supports" :key="index">
          <p class="name" :class="{ green: index == 0, pink: index == 1 }">
            {{ item.name }}
          </p>
          <p class="desc">{{ item.content }}</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navIndex: this.value,
    };
  },
  props: {
    value: Number,
    shopDetails: Object,
  },
  watch: {
    navIndex(nv) {
      this.$emit("input", nv);
    },
    value(nv) {
      this.navIndex = nv;
    },
  },
  components: {},

  computed: {},

  methods: {
    changeTop() {
      document.documentElement.scrollTop = 1000000000;
    },
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
p,
h4
  margin: 0;
  font-size: 20px;
.blank
  background-color: rgb(243, 244, 246);
  height: 25px
.item
  > header
    h4
      font-size: 20px;
      margin: 20px;
    > section
      margin: 20px;
      h4
        font-size: 20px;
      > div
        display: flex
        p
          line-height: 1.5
          font-size: 12px;
          span:first-of-type
            background-color: rgb(49, 144, 232);
            font-size: 14px;
            border-radius: 4px;
            padding: 2px 4px;
            color:#FFF;
      > p
        margin-top: 10px
        font-size:16px;
  > section
    margin: 20px;
    > div
      display: flex;
      margin-top: 10px;
      .name
        margin-right: 10px;
        font-size: 14px;
        background-color: #ff8600;
        color:#fff;
        padding:2px 5px;
      .desc
        font-size: 14px;
.green
  background-color:rgb(112, 185, 68) !important;
.pink
  background-color: rgb(237, 114, 120) !important
</style>

<style scoped></style>
